<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Running</title>
  <link rel="stylesheet" href="./result.css">
</head>

<body>

  <canvas id="canvas" style="width: 100%;height: 100vh"></canvas>

  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d")
    const img = new Image();
    const name = localStorage.getItem("running_name")

    const widthRatio = window.innerWidth < 414 ? 1 : window.innerWidth / 414
    const heightRatio = window.innerHeight / 736

    var delta = 0
    if (window.innerHeight > 736 && window.innerHeight / window.innerWidth > (736 / 414)) {
      delta = (window.innerHeight - (414 / window.innerWidth) * window.innerHeight) * (2 / window.devicePixelRatio)
    }

    img.onload = function () {
      canvas.height = window.innerWidth * img.height / img.width

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      ctx.font = 'bold 20px sans-serif';
      ctx.fillText(name, widthRatio * 98, heightRatio * 284 + delta);
    }
    img.src = './bg.png';
  </script>
</body>

</html>